<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级管理</title>
</head>
<script src="../../js/vue.js"></script>
<script src="../../js/index.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<link href="../../css/index.css" rel="stylesheet"></link>


<body>
<div id="app">
    <el-container>
        <el-header>
            <h2 style="float: left;">tlias 智能学习辅助系统</h2>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>班级学员管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">班级管理</el-menu-item>
                            <el-menu-item index="1-2">学员管理</el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>系统信息管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">部门管理</el-menu-item>
                            <el-menu-item index="2-2">员工管理</el-menu-item>
                            </el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>数据统计管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1">员工信息统计</el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>
                </el-menu>

            </el-aside>
            <el-main>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="班级名称">
                        <el-input v-model="formInline.user" placeholder="请输入班级名称"></el-input>
                    </el-form-item>
                    <el-form-item label="结课时间">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>

                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-button type="primary" @click="dialogFormVisible = true">新增班级</el-button>
                <el-dialog title="新增班级" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="班级名称" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="开班时间" :label-width="formLabelWidth">
                            <div class="block">
                                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </div>

                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="编辑班级信息" :visible.sync="dialogFormVisible2">
                    <el-form :model="editDialogData">
                        <el-form-item label="ID" style="display: none">
                            <el-input v-model="editDialogData.id"></el-input>
                        </el-form-item>
                        <el-form-item label="班级名称">
                            <el-input v-model="editDialogData.className" autocomplete="off"
                                      style="width: 50%"></el-input>
                        </el-form-item>
                        <el-form-item label="教室位置">
                            <el-input v-model="editDialogData.classroom" autocomplete="off"
                                      style="width: 50%"></el-input>
                        </el-form-item>
                        <el-form-item label="班主任">
                            <div class="block">
                                <el-dropdown>
                                    <el-button type="primary">
                                        {{editDialogData.teacher}}<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>张三</el-dropdown-item>
                                        <el-dropdown-item>李四</el-dropdown-item>
                                        <el-dropdown-item>王五</el-dropdown-item>
                                        <el-dropdown-item>赵六</el-dropdown-item>
                                        <el-dropdown-item>田七</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-form-item>
                        <el-form-item label="开课时间">
                            <el-date-picker v-model="editDialogData.startTime" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结课时间">
                            <el-date-picker v-model="editDialogData.endTime" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible2 = false">取消</el-button>
                        <el-button type="primary">确定</el-button>
                    </div>
                </el-dialog>
                <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                    <el-table-column prop="index" label="序号">
                    </el-table-column>
                    <el-table-column prop="className" label="班级名称" width="260">
                    </el-table-column>
                    <el-table-column prop="classroom" label="班级教室">
                    </el-table-column>
                    <el-table-column prop="startTime" label="开课时间">
                    </el-table-column>
                    <el-table-column prop="endTime" label="结课时间">
                    </el-table-column>
                    <el-table-column prop="teacher" label="班主任">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="editUser(scope.row)" type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                               layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: '',
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible2: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                // 展示在页面上额度数据
                tableData: [{
                    index: 1,
                    className: '广州JavaEE220期基础班',
                    classroom: '209',
                    startTime: '2024-03-31',
                    endTime: '2024-04-30',
                    teacher: '老王'
                },
                    {
                        index: 1,
                        className: '广州JavaEE220期基础班',
                        classroom: '209',
                        startTime: '2024-03-31',
                        endTime: '2024-04-30',
                        teacher: '老王'
                    },
                    {
                        index: 1,
                        className: '广州JavaEE220期基础班',
                        classroom: '209',
                        startTime: '2024-03-31',
                        endTime: '2024-04-30',
                        teacher: '老王'
                    },
                    {
                        index: 1,
                        className: '广州JavaEE220期基础班',
                        classroom: '209',
                        startTime: '2024-03-31',
                        endTime: '2024-04-30',
                        teacher: '老王'
                    },
                    {
                        index: 1,
                        className: '广州JavaEE220期基础班',
                        classroom: '209',
                        startTime: '2024-03-31',
                        endTime: '2024-04-30',
                        teacher: '老王'
                    },
                    {
                        index: 1,
                        className: '广州JavaEE220期基础班',
                        classroom: '209',
                        startTime: '2024-03-31',
                        endTime: '2024-04-30',
                        teacher: '老王'
                    },
                    {
                        index: 1,
                        className: '广州JavaEE220期基础班',
                        classroom: '209',
                        startTime: '2024-03-31',
                        endTime: '2024-04-30',
                        teacher: '老王'
                    }
                ],
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,
                // 编辑的用户的数据
                editDialogData: {

                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            tableRowClassName({
                                  row,
                                  rowIndex
                              }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }, editUser(row) {
                this.dialogFormVisible2 = true;
                // 在这里模拟展示当前用户数据的对话框逻辑
                console.log('编辑用户：', row);
                axios.get("https://apifoxmock.com/m2/3226269-0-default/204264605?id=1").then(
                    (res) => {
                        this.editDialogData = res.data.data;
                    }
                )
            }
        }

    })
</script>

</html>